<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../libs/jquery.min.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
    <script src="../../libs/bootstrap.min.js"></script>
    <script src="../../libs/vue.min.js"></script>
    <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/echarts.js"></script>
    <script src="../../js/setdate.js"></script>
    <script src="../../libs/My97DatePicker/4.8/WdatePicker.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>班级到课排名</title>
</head>
<body>
<div id="rrapp" v-cloak>
    <el-select
            v-model="collageValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;"
            placeholder="请选择部门">
        <el-option
                v-for="item in collageOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="yearValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择学年">
        <el-option
                v-for="item in yearOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="termValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择学期">
        <el-option
                v-for="item in termOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="weekValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择教学周">
        <el-option
                v-for="item in weekOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="dayValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择星期几">
        <el-option
                v-for="item in dayOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-select
            v-model="indexValue"
            multiple
            collapse-tags
            size="small"
            style="margin-left: 20px;width: 150px"
            placeholder="请选择第几节">
        <el-option
                v-for="item in indexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
</div>
<div class="search-container" >
    <div class="select-container" >
        <select  class="mySelect" id="option" >
            <!--<option value=''>全校</option>-->
            <!--<option value='college'>学院</option>-->
            <!--<option value='class'>班级</option>-->
        </select>
    </div>

    <div class="form-group" style="display: none" id="CollegeSelect">
        <select  class="form-control" id="College"  >
        </select>
    </div>
    <div class="select-container">
        <input type="text" class="mySelect" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="startDate" name="startDate" placeholder="开始时间"/>
    </div>

    <div class="select-container">
        <input type="text" class="mySelect" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="endDate" name="endDate"  placeholder="结束时间"/>
    </div>

    <div class="btn-container">
        <a class="btn-thin" onclick="query()">查询</a>
    </div>

    <div class="btn-container">
        <span  class="normal-btn normal-color" onclick="setDate('1')">今日</span>
        <span  class="normal-btn normal-color" onclick="setDate('2')">本周</span>
        <span  class="normal-btn normal-color" onclick="setDate('3')">本月</span>
    </div>
    <div style="flex: 3;">

    </div>

</div>
<div id="chartsContainer" style="height:550px;display: flex;flex-direction: row;justify-content: center;align-items: center;">

    <div id="studentAttendenceChartFirstTen" style="width: 1600px;height:500px;float:left;"></div>
</div>
    <div style="height:550px;display: flex;flex-direction: row;justify-content: center;align-items: center;">

    <div id="studentAttendenceChartEndTen" style="width: 1600px;height:500px;float:left;"></div>
</div>
</body>
<script>
  var vm = new Vue({
    el:'#rrapp',
    data:{
      collageData:null,
      yearData:null,
      termData:null,
      weekData:null,
      dayData:null,
      indexData:null,
      collageValue:[],
      yearValue:[],
      termValue:[],
      weekValue:[],
      dayValue:[],
      indexValue:[],
      collageOptions:[],
      yearOptions:[],
      termOptions:[],
      weekOptions:[],
      dayOptions:[],
      indexOptions:[]
    },
    mounted(){
         $.ajax({
            url: baseURL + "/college/getAllcollege",
            data: {},
            success: function (r) {
                for (i = 0; i < r.list.length; i++) {
                    var tempJson={
                        'value':r.list[i].collegeName,
                        'label':r.list[i].collegeName
                    }
                    vm.collageOptions.push(tempJson)
                }
            }
        });
        $.ajax({
            url: baseURL + "/term/getSchoolTerm",
            data: {},
            success: function (r) {
                for (i = 0; i < r.list.length; i++) {
                     var tempJson={
                        'value':r.list[i].schoolAcademicYear,
                        'label':r.list[i].schoolAcademicYear
                    }
                    vm.yearOptions.push(tempJson)
                }
            }
         });
         var listTerm=["1","2"];
         for (i = 0; i < listTerm.length; i++) {
            var tempJson={
                'value':listTerm[i],
                'label':"第"+listTerm[i]+"学期"
            }
            this.termOptions.push(tempJson)
         }
         for (i = 1; i < 21; i++) {
            var tempJson={
                'value':i,
                'label':"第"+i+"周"
            }
            this.weekOptions.push(tempJson)
         }
         for (i = 1; i < 8; i++) {
           var tempJson={
                'value':i,
                'label':"星期"+i
            }
            this.dayOptions.push(tempJson)
         }
         for (i = 1; i < 11; i+=2) {
            var tempJson={
                'value':i,
                'label':"第"+i+"节"
            }
            this.indexOptions.push(tempJson)
         }
    },
    methods:{

    }
});
   //*******************************v**u**e********************************
    var studentAttendenceChartFirstTen = echarts.init(document.getElementById('studentAttendenceChartFirstTen'));
    var studentAttendenceChartEndTen = echarts.init(document.getElementById('studentAttendenceChartEndTen'));
    option2 = {
        title: {
            text: '到课率排行',
            subtext: '前十名'
        },
        tooltip: {
        },
        legend: {
            data:['班级']
        },
        toolbox: {
        },
        xAxis:  {
            type: 'category',
            data: ['','','','','','','','','','',''],
            axisLabel: {
                interval:0,
                rotate:40
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} %'
            }
        },
        series: [
            {
                name:'到课率',
                type:'bar',
                data:[100,100,100,100,100,100,100,100,100,100],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    option = {
        title: {
            text: '课率排行',
            subtext: '后十名'
        },
        tooltip: {
        },
        legend: {
            data:['班级']
        },
        toolbox: {
        },
        xAxis:  {
            type: 'category',
            data: ['','','','','','','','','','',''],
            axisLabel: {
                interval:0,
                rotate:40
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} %'
            }
        },
        series: [
            {
                name:'到课率',
                type:'bar',
                data:[100,100,100,100,100,100,100,100,100,100],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    window.onresize = function(){
        studentAttendenceChartFirstTen.resize()
        studentAttendenceChartEndTen.resize()
    }
    $(function () {
        $.ajax({
            url: baseURL + "/college/getAllStudentCollege",
            data: {},
            success: function (r) {
                $("#option").append("<option value=''>全校</option>");
                for (i = 0; i < r.list.length; i++) {
                    var tname = r.list[i].collegeName;
                    var tid = r.list[i].collegeName;
                    $("#option").append("<option value='" + tid + "'>" + tname + "</option>");
                }
            }
        });
    setDate('3')
    });
    function query() {
        loadOption();
    }
    function getSeries(data)
    {
        var     series=
            {
                name:'到课率',
                type:'bar',
                data:data,
                barWidth : 30,//柱图宽度
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        return series;
    }
    function goString(data){
        var temp=""
        for(let i in data){
            if(i==data.length-1){
                temp+=('\''+data[i]+'\'')
            }else{
                temp+=('\''+data[i]+'\'')+','
            }
        }
        return temp
    }

    function loadOption(){
        vm.collageData=goString(vm.collageValue);
        vm.yearData=goString(vm.yearValue);
        vm.termData=goString(vm.termValue);
        vm.weekData=goString(vm.weekValue);
        vm.dayData=goString(vm.dayValue);
        vm.indexData=goString(vm.indexValue);
        $.ajax({
            url : baseURL + "/AttendenceCharts/getAttendanceProfessionRankingFirstTen",
            data : {
                "collegeName":vm.collageData,
                "academicYear":vm.yearData,
                "academicTerm":vm.termData,
                "academicWeek":vm.weekData,
                "academicDay":vm.dayData,
                "academicIndex":vm.indexData,
                "startDate":$("#startDate").val(),
                "endDate":$("#endDate").val()
            },
            dataType : "json",
            success : function(result) {

                option2.xAxis.data=result.option.classNamesFirstTen;
                option2.series=getSeries(result.option.rateFirstTen);
                studentAttendenceChartFirstTen.setOption(option2,true);

                option.xAxis.data=result.option.classNamesEndtTen;
                option.series=getSeries(result.option.rateEndTen);
                studentAttendenceChartEndTen.setOption(option,true);

            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                studentNonAttendenceChart.hideLoading();
            }

        })
    };

</script>
</html>